<template>
  <div class="orgList-container">
    <div class="orgList-content">
      <page-header
        @add="add"
        type="referral"
        @reset="resetSeach"
        @searchChange="searchData"
      ></page-header>
      <pagination-table
        ref="ptable"
        :tableData="d.listData"
        @pagination="paginaChange"
      >
        <XMTableColumn label="科室名称" prop="name"></XMTableColumn>
        <XMTableColumn
          label="创建时间"
          sortable="custom"
          prop="createTime"
        ></XMTableColumn>
        <XMTableColumn
          label="状态"
          width="80"
          prop="statusTitle"
        ></XMTableColumn>
        <XMTableColumn label="操作">
          <template #default="scope">
            <el-button size="small" type="primary" @click="edit(scope.row)">
              编辑
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="statuschange(scope.row)"
            >
              {{ scope.row.status === 0 ? '启用' : '禁用' }}
            </el-button>
            <el-button size="small" type="danger" @click="del(scope.row)">
              删除
            </el-button>
          </template>
        </XMTableColumn>
      </pagination-table>
    </div>
    <referral-out v-model="d.isReferral"></referral-out>
  </div>
</template>
<script>
  import PageHeader from '@/components/PageHeader'
  import PaginationTable from '@/components/PaginationTable'
  import {
    remove,
    departments,
    changeStatus,
  } from '@/api/modules/departments.js'
  import { onBeforeMount, reactive, ref } from '@vue/runtime-core'
  import { useRouter } from 'vue-router'
  import { ElMessageBox } from 'element-plus'
  import moment from 'moment'
  export default {
    components: { PaginationTable, PageHeader },
    name: 'referral',
    setup() {
      const router = useRouter()
      const d = reactive({
        listData: [],
        search: { pageIndex: 1, pageSize: 5, orderType: 1 },
        isReferral: false,
      })

      async function loadData(params) {
        const res = await departments(params)
        res.data = res.data.map((item) => {
          item['statusTitle'] = item.status === 0 ? '禁用' : '启用'
          return item
        })
        d.listData = res
      }

      const paginaChange = function (params) {
        d.search.pageIndex = params.current
        d.search.pageSize = params.pageSize
        d.search.orderType = params.orderType
        loadData(d.search)
      }

      function searchData(params) {
        d.search.name = params.value1
        d.search.status = params.value3
        d.search.startDay = params.value2.start
          ? moment(params.value2.start).format('YYYY-MM-DD')
          : null
        d.search.endDay = params.value2.end
          ? moment(params.value2.end).format('YYYY-MM-DD')
          : null
        loadData(d.search)
      }

      // 事件处理
      const ptable = ref(null)
      const resetSeach = function () {
        d.search = { pageIndex: 1, pageSize: 5, orderType: 1 }
        loadData(d.search)
        ptable.value.clearData()
      }
      const add = function () {
        // router.push({ name: 'departmentInfo' })
        d.isReferral = true
      }

      const edit = function (row) {
        router.push({ name: 'departmentInfo', query: { id: row.id } })
      }

      const alert = function (title, cb) {
        ElMessageBox.confirm(title, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
        }).then(() => {
          if (cb) cb()
        })
      }
      const statuschange = function (row) {
        const str = row.status === 1 ? '禁用' : '启用'
        alert(`是否确定${str}科室: ${row.name}`, async () => {
          await changeStatus({ id: row.id, status: row.status === 1 ? 0 : 1 })
          loadData(d.search)
        })
        // TODO 刷新
      }

      const del = async function (row) {
        alert(`是否确定删除科室: ${row.name}`, async () => {
          await remove({ id: row.id })
          loadData(d.search)
        })
        // TODO 刷新
      }
      onBeforeMount(() => {
        loadData(d.search)
      })
      return {
        d,
        searchData,
        add,
        edit,
        del,
        statuschange,
        resetSeach,
        paginaChange,
        ptable,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .orgList-container {
    margin: 32px;

    .orgList-content {
      background-color: white;
      overflow: hidden;

      .el-divider--horizontal {
        margin: 12px 2px;
      }
    }
  }
</style>
